<html>

<head>
    <link rel="stylesheet" href="../normalize.css">
    <link rel="stylesheet" href="../index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
</body>

<script type="text/javascript">
    /* 还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除 */
    var vm = new Vue({
        data: {
            a: 1
        }
    })
    // `vm.a` 现在是响应式的
    vm.b = 2
    // `vm.b` 不是响应式的


    /* 对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。*/
    // 但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性
    var vm_1 = new Vue({
        data: {
            userProfile: {
                name: 'Anika'
            }
        }
    })
    Vue.set(vm_1.userProfile, 'age', 27)
    vm.$set(vm_1.userProfile, 'age', 27)

    /* 分配多个属性 */
    // 不要使用这种模式
    Object.assign(vm.userProfile, {
        age: 27,
        favoriteColor: 'Vue Green'
    })
    //应该使用这种模式
    vm.userProfile = Object.assign({}, vm.userProfile, {
        age: 27,
        favoriteColor: 'Vue Green'
    })
</script>

</html>